<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>margin_border_padding</title>
    <style>

    </style>
</head>

<body>

    <div>

        <h2>margin</h2>
        <h3>margin原则</h3>
        <p>盒子模型 占据尺寸(包括margin) > 可视尺寸（不包括margin） </p>

        <div style="float:left;">
            <h3>可视尺寸</h3>
            <p>适用于没有设定width height 普通block水平元素 不能是float,absolute,inline,table-cell </p>
            <p>只适用于水平方向尺寸 垂直方向不起作用</p>

            <h3>下面改变margin的left right值 可视范围可以看到变化 但改变top bottom是不会变的</h3>

            <div style="width:500px;height:200px;padding:50px;background-color: rgb(213, 218, 223);">
                <div style="margin: 10px -50px; background-color: rgb(41, 136, 17);">
                    <p>ddddddddddddddd</p>
                    <p>sdfsdfdsfd</p>
                </div>
            </div>
        </div>


        <div style="margin-left:50px;float:left;">
            <h3>占据尺寸</h3>
            <h3>block inline-block 均使用</h3>
            <h3>margin-bottom:-30px; 少占据30px 可以看背景变化 </h3>

            <div style="text-align: center; background-color: rgb(213, 218, 223);">
                <img style="margin-bottom:-30px;" src="images/111.jpg" />
            </div>
        </div>



        <div style="margin-left:50px;float:left;">
            <h3>百分比</h3>
            <h4> margin:10%;只是相对于父容器的宽度的 </h4>

            <div style="width:200px;height: 300px; background-color: rgb(213, 218, 223);">
                <img style="margin:50%" src="images/111.jpg" />
            </div>



            <h4> 如果是absolute的margin:10%; 则是相对于上一个定位父级（relative,absolute,fixed）元素的宽度的百分比</h4>
            <div style="position:relative;margin-top: 100px; height: 300px; background-color: rgb(27, 167, 27);">
                <div style="width:300px;height: 300px;background-color: rgb(213, 218, 223);">
                    <img style="margin:10%;position:absolute;" src="images/111.jpg" />
                </div>
            </div>
        </div>

        <div style="clear:both;"></div>



        <h3 style="margin-top:100px;">margin-重叠</h3>
        <p>善用margin重叠： top bottom都可以设置上 特别是在表单或者列表上</p>

        <div style="float:left;">
            <h4> 相邻元素重叠</h4>

            <p style="line-height:2em;margin:1em 0;background-color: rgb(213, 218, 223);">one</p>
            <p style="line-height:2em;margin:1em 0;background-color: rgb(213, 218, 223);">two</p>
        </div>


        <div style="float:left;margin-left: 50px;">
            <h4> margin-top 会发生重叠的条件： </h4>
            <p>父元素不是块状格式化上下文元素（BFC）</p>

            <div style="width:300px;height:220px;background-color: rgb(213, 218, 223);overflow: hidden;">
                <div style="margin-top:100px;width:200px;height:100px;background-color: rgb(187, 98, 25);"></div>
            </div>

            <p>父元素和第一个子元素没有inline元素分隔</p>
            <div style="width:300px;height:220px;background-color: rgb(213, 218, 223);">&nbsp;
                <div style="margin-top:100px;width:200px;height:100px;background-color: rgb(187, 98, 25);"></div>
            </div>

            <p>父元素没有border-top、padding-top 值</p>
            <div style="width:300px;height:220px;background-color: rgb(213, 218, 223);padding-top: 10px;">
                <div style="margin-top:100px;width:200px;height:100px;background-color: rgb(187, 98, 25);"></div>
            </div>
        </div>


        <div style="float:left;margin-left: 50px;">
            <h4> margin-bottom 会发生重叠的条件： </h4>
            <p>父元素不是块状格式化上下文元素（BFC）</p>
            <p>父元素没有border-ottom、padding-ottom 值</p>
            <p>父元素和最后一个子元素没有inline元素分隔</p>

            <p>父元素没有height,min-height,max-height值</p>

            <div style="height:250px;width:300px;background-color: rgb(213, 218, 223);">
                &nbsp;
                <div
                    style="margin-bottom:50px;margin-top:50px;width:200px;height:100px;background-color: rgb(187, 98, 25);">
                </div>
            </div>
        </div>


        <div style="float:left;margin-left: 50px;">
            <h4>空block元素margin重叠 </h4>
            <p>元素不能有border,padding值</p>
            <p>里面没有inline元素</p>
            <p>没有height,min-height值</p>

            <div style="width:300px;background-color: rgb(213, 218, 223);overflow:hidden;">
                <div style="margin:1em 0;"></div>
            </div>


            <div style="width:300px;margin-top:10px;background-color: rgb(213, 218, 223);overflow:hidden;">
                <div style="margin:1em 0;border:2px solid #ff4136;"></div>
            </div>
        </div>

        <div style="float:left;margin-left: 50px;">
            <h4>margin重叠计算规则（同级元素） </h4>
            <p>正正取大</p>
            <p>正负相加</p>
            <p>负负取最负值</p>

            <div style="margin-bottom:50px;  width:300px;height:1em;background-color: rgb(213, 218, 223);"></div>
            <div style="margin-top:20px; width:300px;height:1em;background-color: rgb(213, 218, 223);"></div>

        </div>



        <div style="clear:both;"></div>



        <h3 style="margin-top:100px;">margin auto 、 负值 、 无效情况</h3>

        <div style="float:left;">
            <h4> margin auto </h4>
            <p>应用于自动填满容器的元素</p>
            <p>比如div的宽度 和 设置了absolute的left:0 right:0</p>
            <p>margin auto 自动填充剩余空间部分 分配剩余空间</p>

            <p>一侧定值，一侧auto auto为剩余空间大小</p>
            <div style="width:300px;height: 100px;background-color: rgb(213, 218, 223);">
                <div
                    style="margin-left:auto;margin-right:50px;width:100px;height: 100px;background-color: rgb(187, 98, 25);">
                </div>
            </div>

            <p>margin 两侧都 auto 则是平分剩余空间 表现为居中</p>
            <div style="width:300px;height: 100px;margin-top:10px;background-color: rgb(213, 218, 223);">
                <div
                    style="margin-left:auto;margin-right:auto;width:100px;height: 100px;background-color: rgb(187, 98, 25);">
                </div>
            </div>

            <p>对图片替换元素，则要设置display:block;</p>
            <div style="width:300px;height: 220px;margin-top:10px;background-color: rgb(213, 218, 223);">
                <img style="margin:0 auto;display: block;" src="images/222.jpg" />
            </div>


            <p style="margin-top:50px;">margin:auto 居中 ie8+</p>
            <p>position:absolute;left: 0;top: 0;right: 0;bottom: 0; margin:auto;</p>
            <div
                style="position:relative; width:300px;height: 180px;margin-top:10px;background-color: rgb(213, 218, 223);">
                <div
                    style="position:absolute;left: 0;top: 0;right: 0;bottom: 0; margin:auto;width:100px;height: 100px;background-color: rgb(187, 98, 25);">
                </div>
            </div>
        </div>

        <div style="float:left;">
            <h4> margin 负值 </h4>

            <p>以下不能三等分，最右边有留白</p>
            <div style="width:600px;height:100px;background-color: rgb(213, 218, 223);">
                <div>
                    <div
                        style="width:190px;height:100px;margin-right:10px;background-color: rgb(187, 98, 25);float: left;">
                        item</div>
                    <div
                        style="width:190px;height:100px;margin-right:10px;background-color: rgb(187, 98, 25);float: left;">
                        item</div>
                    <div
                        style="width:190px;height:100px;margin-right:10px;background-color: rgb(187, 98, 25);float: left;">
                        item</div>
                </div>
            </div>



            <p>扩大向右的可视范围，通过margin:-10px</p>
            <p>将父容器向右margin:-10px 然后重新计算每列大小 (600+10)/3 - 10 则为每列的宽度</p>
            <div style="width:600px;height:100px;background-color: rgb(213, 218, 223);">
                <div style="margin-right:-10px;overflow: hidden;">
                    <div
                        style="width:193.33px;height:100px;margin-right:10px;background-color: rgb(187, 98, 25);float: left;">
                        item</div>
                    <div
                        style="width:193.33px;height:100px;margin-right:10px;background-color: rgb(187, 98, 25);float: left;">
                        item</div>
                    <div
                        style="width:193.33px;height:100px;margin-right:10px;background-color: rgb(187, 98, 25);float: left;">
                        item</div>
                </div>
            </div>



            <p>margin:-10px 改变占据尺寸 负值使尺寸缩小</p>
            <div style="text-align: center;margin-top:80px; background-color: rgb(213, 218, 223);">
                <img style="margin:-30px 0;" src="images/111.jpg" />
            </div>



            <p style=" margin-top:80px; ">两栏等高： margin-bottom:-100px;缩小占据尺寸 padding-bottom:100px; 恢复占据尺寸</p>
            <div style="overflow: hidden;width:300px;background-color: rgb(213, 218, 223);">
                <div
                    style="margin-bottom:-100px;padding-bottom:100px;float:left;width:150px;text-align: center;background-color: rgb(187, 98, 25);">
                    <span>aaaaaaaaaa</span>
                    <span>aaaaaaaaaa</span>
                    <span>aaaaaaaaaa</span>
                </div>
                <div
                    style="margin-bottom:-100px;padding-bottom:100px;float:left;width:150px;text-align: center;background-color: rgb(103, 201, 231);">
                    <span>aaaaaaaaaa</span>
                </div>
            </div>
        </div>

        <div style="float:left;">

            <h4>margin无效情况 </h4>

            <p> inline元素(不是替换元素 eg:img)   margin垂直无效 </p>
            <div  style="width:300px;background-color: rgb(213, 218, 223);">
                <span  style="margin:120px;background-color: rgb(187, 98, 25);">aaaaaaaaaa</span>
            </div>

            <p> margin重叠情况 </p>
            
            <p> display:table-cell|table-row; </p>
            
            <p> 绝对定位元素非定位方位margin无效</p>
            
            <p> margin相对于整个容器，而不是相邻的浮动元素</p>
           
        </div>

        <div style="clear:both;"></div>

        <div>
            <h3> padding  </h3>
            <h4>padding值 对于inline水平元素影响左右，但不影响上下，会影响背景色占据的空间 </h4>

            <div style="width:300px;height:100px;background-color: rgb(213, 218, 223);">
                
                <p>aaaaaaaaaaaaa</p>
                <span>11111</span><span style="padding:30px;background-color: rgb(187, 98, 25);">222222</span><span>3333333</span>
                <p>bbbbbbbbbbbbb</p>
            </div>

            <h4>制作分隔符 </h4>
            <div style="width:100px;text-align:center; background-color: rgb(213, 218, 223);">
                登录<span style="padding:2px 6px 2px;margin-left:12px;border-left:2px solid; fond-size:0;"></span>注册
            </div>




        </div>

    </div>


</body>

</html>